import React, { useEffect, useRef } from "react";
type Point = {
  sx: number;
  sy: number;
  vx: number;
  vy: number;
  life: number;
  color: string;
  size: number;
};

type Click = {
  sx: number;
  sy: number;
  color: string;
  life: number;
};
const singleJsMouseAni: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const clicks: Click[] = [];
    const points: Point[] = []; // 定义粒子数组
    const live = 50; // 存活50个周期
    const colors = [
      // 备选粒子颜色数组
      "236, 204, 104",
      "255, 71, 87",
      "112, 161, 255",
      "123, 237, 159",
    ];

    const handleMouseMove = (evt: MouseEvent) => {
      for (let i = 0; i < 15; i++) {
        // 添加15个粒子
        points.push({
          sx: evt.x, // 鼠标当前坐标作为粒子坐标
          sy: evt.y,
          vx: 0.5 - Math.random(), // x轴及y轴的移动向量，取值范围为-0.5 ~ 0.5
          vy: 0.5 - Math.random(),
          life: live, // 存活周期
          color: colors[Math.floor(Math.random() * colors.length)], // 随机选择颜色
          size: Math.random() * 5, // 随机粒子尺寸，取值范围为0~5
        });
      }
    };

    const handleClick = (evt: MouseEvent) => {
      clicks.push({
        sx: evt.x,
        sy: evt.y,
        color: colors[Math.floor(Math.random() * colors.length)],
        life: live,
      });
    };

    const drawPoints = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清屏

      for (let i = 0; i < points.length; i++) {
        // 遍历粒子
        const point = points[i]; // 定义单个粒子
        ctx.beginPath();
        ctx.arc(point.sx, point.sy, point.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${point.color}, ${point.life / live})`; // 根据粒子属性设置填充颜色及透明度
        ctx.fill(); // 填充颜色
        point.life--; // 生命值减1
        if (point.life <= 0) {
          // 生命值为0则从粒子数组中删除
          points.splice(i, 1);
        }
        point.sx += point.vx * 3; // 根据向量值改变粒子位置
        point.sy += point.vy * 3;
      }

      for (let i = 0; i < clicks.length; i++) {
        // 绘制点击效果
        const click = clicks[i];
        ctx.beginPath();
        ctx.arc(click.sx, click.sy, live - click.life, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${click.color}, ${click.life / live})`;
        ctx.fill();
        click.life--;
        if (click.life <= 0) {
          clicks.splice(i, 1);
        }
      }
    };

    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("click", handleClick);

    const intervalId = setInterval(drawPoints, 20);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("click", handleClick);
      clearInterval(intervalId);
    };
  }, []);

  return (
    <div>
      <canvas
        ref={canvasRef}
        style={{
          position: "fixed",
          pointerEvents: "none",
          left: 0,
          top: 0,
          width: "100%",
          height: "100%",
          zIndex: 999999,
        }}
      ></canvas>
    </div>
  );
};

export default singleJsMouseAni;
